Styled Mode 根據 Design token(設計標籤)規劃三種層級：primitive(原始)、semantic(語意) 以及 component(元件)。

1. primitive：在原始樣式設計中，該樣式名稱不具語意，會以原始顏色名稱作為命名規則，比如 blue-50 到 blue-900。通常由語意使用，如 blue-500 可做為主色的背景色，但本身名稱不具有內容意義。
2. semantic：在語意樣式設計中，該樣式名稱具有明確的內容定義，定義其使用的位置，較廣為人知的是主色命名 primary.color。語意標籤可對應於原始標籤或其他的語意標籤，設定時使用 colorScheme 群組進行語意標籤的定義，也可根據語意標籤設計對應深色模式。
3. component：在元件樣式設計中，該樣式獨立於每個元件，比如輸入框元件的背景色對應到 .inputtext.background、按鈕元件的文字顏色對應 .button.color。

階層概念：button.background 按鈕元件標籤對應到 primary.color 語意標籤；primary.color 語意標籤又對應到 green.500 原始標籤。

介面配置

theme：自訂預設初始的主題，本次採用 primeVue 的主題 Aura。

import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);

app.use(PrimeVue, {
    // Default theme configuration
    theme: {
        preset: Aura,
        options: {
		        prefix: 'p', // 前綴，預設為 p
            darkModeSelector: 'system',
            cssLayer: false
        }
    }
 });

其中，

1. preset 為主題設定， Aura 為 primeVue 提供的主題
2. options 為可選的 CSS 樣式設定，包含深色模式、CSS 樣式前綴及 CSS Layer。
   1. prefix 預設為 p，即 CSS 變數前綴皆帶有 p，如主色 primary.color 的設計標籤，使用該變數時為 var(—p-primary-color)，若使用預設可不寫。
   2. darkModeSelector 為深色模式設定，預設為 system 產生 @media (prefers-color-scheme: dark) ，若要進行深色模式的切換，須定義一個 CSS 類別選擇器(比如 .my-dark)，在 document root 上切換此樣式，以達到深色模式的渲染。
   3. cssLayer 在 CSS 層內定義樣式，可宣告自訂讀取的順序，預設為 false。如下程式碼在整合 tailwindCSS 時，order 的讀取會先以 tailwind-base 載入初始 reset 樣式或清除瀏覽器預設樣式，再讀取 primevue 主題設定樣式，最後讀取 tailwind 的通用類別。

options: {
    cssLayer: {
        name: 'primevue',
        order: 'tailwind-base, primevue, tailwind-utilities'
    }
}

主題樣式自訂

使用 definePreset 方法可自訂主題內容：

import PrimeVue from 'primevue/config';
import { definePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura';

const MyPreset = definePreset(Aura, {
    // 將客製化樣式設定於此
});

app.use(PrimeVue, {
    theme: {
        preset: MyPreset // 取代 Aura
    }
});

semantic 的應用

根據上述的 Styled Mode 規則設計，使用 semantic 設定 primary 主題色設定：

const MyPreset1 = definePreset(Aura, {
    semantic: {
        primary: {
            50: '{indigo.50}',
            100: '{indigo.100}',
            ...
            950: '{indigo.950}'
        }
    }
});
app.use(PrimeVue, {
    theme: {
        preset: MyPreset1 // 取代 Aura
    }
});

semantic > colorScheme 的應用

根據 semantic 內的 colorScheme 設定深淺色模式：

const MyPreset2 = definePreset(Aura, {
    semantic: {
        colorScheme: {
            light: {
                primary: {
                    50: '{indigo.50}',
				            100: '{indigo.100}',
				            ...
				            950: '{indigo.950}'
                }
            },
            dark: {
                primary: {
                    50: '{zinc.50}',
				            100: '{zinc.100}',
				            ...
				            950: '{zinc.950}'
                }
            }
        }
    }
});
app.use(PrimeVue, {
    theme: {
        preset: MyPreset2 // 取代 Aura
    }
});

其他設定如表單樣式、Focus Ring 及元件可再依照專案所需客製樣式。

PrimeVue UI 元件字體

採用 rem 作為字體單位，1rem 即為 16px，若要將整體網站的文字大小設定為 14px，可採用如下設定：

html {
    font-size: 14px;
}

上述提及的主題設定、深色模式及整合 tailwindCSS 會在後面有篇幅進行說明~

參考連結：https://primevue.org/theming/styled/